<template>
  <div class="page">
    <m-header :title="langText&&langText.problemdetails" :canback="Boolean(1)"></m-header>
    <div class="body">
      
      <div class="bgc">
        <div class="bgc_1"></div>
        <div class="bgc_2"></div>
      </div>
      
      <div class="content">
        
        <div class="top-box">
            <span class="title">{{ details ? details.title : ''}}</span>
            <!-- <div class="top_bgc"></div> -->
        </div>
        
        <div class="content_bot" v-html="details ? details.contents : ''"></div>
      </div>

      <!-- <div class="title">{{ details ? details.title : ''}}</div>
      <div class="detail" v-html="details ? details.contents : ''"></div> -->
    </div>
  </div>
</template>
<script>
import { Help } from "@/server/server.js";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      details: null,
      langText:null,
    };
  },
  created () {
  },
  computed: {
    ...mapGetters(["lang"])
  },
  mounted() {
    this.langText = Object.assign({},JSON.parse(localStorage.getItem('mineData')))
    let questionId = this.$route.params.id;
    let id = questionId ? questionId : localStorage.getItem("questionId")
    localStorage.setItem("questionId", id)
    this.getDetail({ id }, data => {
      this.details = data.data;
      
    });
  },
  methods: {
    getDetail(params, callback) {
      Help.getDetail(params).then(res => {
        if (res.code == 1) {
          callback(res.data);
        } else {
          mui.toast(res.msg);
        }
      });
    }
  }
};
</script>
<style  scoped>
.detail >>> p {
  color: #666;
  font-size: 28px;
}
</style>
<style lang="less" scoped>
@import '~link-less';
.page {
    background: @bg-color;
    // color: @bg-color-white;
    
  .body {
      // padding: 30px;
      word-wrap: break-word;
      background-color: @bg-color;
        .bgc{
          width: 100%;
          height: 0;
          position: fixed;
          z-index: -99;
          .bgc_1{
            width: 100%;
            // position: absolute;
            background-color: #4EB6AD;
            height: 290px;
          }
          .bgc_2{
            width: 140%;
            background-color: #4EB6AD;
            border-radius: 100%;
            height: 200px;
            margin-left: -20%;;
            margin-top: -150px;
            // bottom: 0;
          }
        }
        .content{
          background-color: #fff;
          width: 710px;
          margin: 20px;
          border-radius: 10px;
          padding: 30px 42px;
          
          .top-box{
            text-align: center;
            .title{
              width: auto;
              font-size:40px;
              font-weight:550;
              color:rgba(78,182,173,1);
              line-height:56px;
              position: relative;
              &::after{
                content: '';
                background:rgba(78,182,173,0.2);
                height: 20px;
                position: absolute;
                bottom: 0;
                width: 120%;
                left: -10%;
              }
            }
          }
          .content_bot{
            margin-top: 60px;
          }
        }
  }
}

.page{
  /deep/ section .header .nav{
    background-color: #4EB6AD !important;
    span{
      color: #fff;
    }
    .center{
      color: #fff;
    }
  }
}
</style>
